<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <style>
        .el-row {
            margin-bottom: 20px;
            &:last-child {
            margin-bottom: 0;
            }
        }
        .el-col {
            border-radius: 4px;
        }
        .bg-purple-dark {
            background: #99a9bf;
        }
        .bg-purple {
            background: #d3dce6;
        }
        .bg-purple-light {
            background: #e5e9f2;
        }
        .grid-content {
            border-radius: 4px;
            min-height: 36px;
        }
        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }
        .box-card {
            margin:auto;
            width: 420px;
            margin-top: 60px;
        }
        .button-style input{
            height: 40px;
            width: 310px;
            background: rgb(73, 159, 235);
            color: white;
            border: 1px solid rgb(34, 121, 208);
            border-radius: 5px;
            font-weight: bolder;
            letter-spacing: 8px;
        }
        h1{
            text-align: center;
            letter-spacing: 10px;
        }
        #id{
          position: absolute;
          margin-left: 150px;
        }
        .rediobutton{
          margin-left: 50px;
        }
        .button-style input{
          height: 40px;
          width: 180px;
          background: rgb(73, 159, 235);
          color: white;
          border: 1px solid rgb(34, 121, 208);
          border-radius: 5px;
          font-weight: bolder;
          letter-spacing: 5px;
        }
    </style>
</head>
<body>
<div id="app">
    <el-card shadow="always" class="box-card">
        <el-form :model="account" status-icon :rules="rules" ref="account" class="demo-account">
            <h1>注册</h1>

            <el-form-item  prop="userId">
                <el-input v-model.number="account.userId" autocomplete="off" placeholder="学号/职工号"></el-input>
            </el-form-item>

            <el-form-item  prop="userName">
                <el-input v-model="account.userName" autocomplete="off" placeholder="姓名"></el-input>
            </el-form-item>

            <el-form-item prop="userPwd">
                <el-input type="password" v-model="account.userPwd" autocomplete="off" placeholder="密码"></el-input>
            </el-form-item>

            <el-form-item prop="checkPass">
                <el-input type="password" v-model="account.checkPass" autocomplete="off" placeholder="确认密码"></el-input>
            </el-form-item>


            <el-row :gutter="20">
                <!--            验证码输入框-->
                <el-col :span="10"><div class="grid-content bg-white">
                    <el-form-item label="" prop="checkCode">
                        <el-input v-model="account.checkCode" autocomplete="off" placeholder="验证码"></el-input>
                    </el-form-item>
                </div></el-col>

                <!--            图片验证码-->
                <el-col :span="2" ><div class="grid-content bg-white">
                    <div class="demo-image">
                        <div class="block">
                            <el-image id="checkcodeimg"
                                      style="width: 100px; height: 50px"
                                      src="http://localhost:8080/accounts/check/codeImg"
                            ></el-image>
                        </div>
                    </div>
                </div></el-col>
                <!--            换一张-->
                <el-col :span="5" :offset="6"><div class="grid-content bg-white">
                    <el-link type="primary" id="changepic" @click="changeimg">换一张</el-link>
                </div></el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="20" :offset="2"><div class="grid-content bg-white">
                    <el-form-item prop="status">
                        <div class="radiobutton">
                            <el-radio v-model="account.status" label="1" border>我是学生</el-radio>
                            <el-radio v-model="account.status" label="2" border>我是老师</el-radio>
                        </div>
                    </el-form-item>
                </div></el-col>
            </el-row>

            <!--        提交按钮-->
            <el-form-item>
                <div class="button-style">
                    <input type="button" @click="submitForm('account')" value="注册"></el-button>
                    <input type="button" @click="gotoLogin" value="去登录"></el-button>
                </div>
            </el-form-item>

        </el-form>
    </el-card>
</div>

<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">

<script>
    new Vue({
        el:"#app",
        data() {
          var checkId = (rule, value, callback) => {
            if (!value) {
              return callback(new Error('学号/职工号不能为空'));
            }
            setTimeout(() => {
              if (!Number.isInteger(value)) {
                callback(new Error('请输入数字值'));
              } else {
                if((""+value).length!=5){
                  callback(new Error('学号/职工号必须是五位数'));
                }else {
                  axios({
                    method:'get',
                    url:"http://localhost:8080/accounts/check/userId?id="+value,
                    headers:{
                        'Authorization':localStorage.getItem('token')
                    }
                }).then(resp=>{
                              if(resp.data.code==1){
                                  callback();
                              }else if(resp.data.code==0){
                                  callback(new Error(resp.data.msg));
                              }
                          })
                      }
              }
            }, 1000);
          };
            var validateuserName = (rule, value, callback) => {
                if (value==='') {
                    return callback(new Error('用户名不能为空'));
                }
                setTimeout(() => {
                     if ( value.length>=10 ) {
                        callback(new Error('用户名过长'));
                     } else {
                        callback();
                     }
                }, 1000);
            };

          var validatePass = (rule, value, callback) => {
            if (value.length <= 6) {
              callback(new Error('密码长度必须大于六位'));
            } else {
              if (this.account.checkPass !== '') {
                this.$refs.account.validateField('checkPass');
              }
              callback();
            }
          };
          var validatePass2 = (rule, value, callback) => {
            if (value === '') {
              callback(new Error('请再次输入密码'));
            } else if (value !== this.account.userPwd) {
              callback(new Error('两次输入密码不一致!'));
            } else {
              callback();
            }
          };
        var validateCheckCode = (rule, value, callback) => {
                if (value==='') {
                  return callback(new Error('验证码为空'));
                }else{
                    callback();
                }
        };
      return {
            account: {
              userId: '',
              userName:'',
              userPwd: '',
              checkPass: '',
              status:'1',
              checkCode:''
            },
            changeimg(){
                document.getElementById("checkcodeimg").src="http://localhost:8080/accounts/check/codeImg?"+new Date().getMilliseconds();
            },
            rules: {
              userName: [
                { validator: validateuserName, trigger: 'blur' }
              ],
              userPwd: [
                { validator: validatePass, trigger: 'blur' }
              ],
              checkPass: [
                { validator: validatePass2, trigger: 'blur' }
              ],
              userId: [
                { validator: checkId, trigger: 'blur' }
              ],
              checkCode: [
                { validator: validateCheckCode, trigger: 'blur' }
              ]
            }
      };
    },

    methods: {
      submitForm(account) {
        this.$refs[account].validate((valid) => {
          if (valid) {
<!--            console.log(this.account);-->
            axios({
                    method:'post',
                    url:"http://localhost:8080/accounts/register",
                    data:this.account,
                    headers:{
                        'Authorization':localStorage.getItem('token')
                    }
                }).then(res=>{
                    if(res.data.code==1){
                        this.$message({
                          message: '注册成功!',
                          type: 'success'
                        });
                        setInterval(function(){
                            location.href="Login.html";
                        },1000);
                    }else if(res.data.code==0){
                            this.$message.error(res.data.msg);
                            this.changeimg();
                        }
                 })
          }
        });
      },
      gotoLogin() {
        location.href="Login.html";
      }
    }
    })
</script>

</body>
</html>